<template>
	<view class="content">
		<wu-calendar color="#3f51b5" :insert="true" @change="calendarChange" mode="range"></wu-calendar>
		<view class="timeGroup">
			<view class="time">开始时间</view>
			<view style="line-height: 80rpx;">——</view>
			<view class="time">结束时间</view>
		</view>
		<view class="timeGroup">
			<view class="time">{{startTime || '请选择'}}</view>
			<view style="line-height: 80rpx;">——</view>
			<view class="time">{{endTime || '请选择'}}</view>
		</view>
		<view class="all">共&nbsp;{{data.length}}&nbsp;天</view>
		<view style="margin: 0 auto;padding: 0 40rpx;">
			<u-button type="primary" @click="submit">确  定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:'',
				startTime:null,
				endTime:null,
				data:[]
			}
		},
		methods:{
			calendarChange(e){
				console.log(e);
				this.startTime = e.range.before
				this.endTime = e.range.after
				this.data = e.range.data
			},
			submit(){
				let obj = {
					startTime:this.startTime,
					endTime:this.endTime,
					data:this.data,
				}
				this.$emit('onClose',obj)
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		.timeGroup{
			margin: 30rpx;
			display: flex;
			justify-content: space-around;
			.time{
				margin: 20rpx 0;
			}
		}
		.all{
			text-align: right;
			margin: 30rpx;
			font-size: 28rpx;
			color: #000;
			font-weight: bold;
		}
	}
</style>